<template>
	<view class="recruitment">
		<view class="content">
			<view class="title">招工类型</view>
			<!-- <u-input v-model="recruitment_type" placeholder="请选择" disabled="true" type="select"  placeholder-style="color:#999999;"
				@click="jobShow=true" /> -->
			<view class="modify_input" @click="jobShow=true">
				<text v-if="recruitment_type!=''">{{recruitment_type}}</text>
				<text style="color:#999999" v-else>请选择</text>
				<image src="../../../static/image/drop-down.png"></image>
			</view>
			<u-picker mode="selector" v-model="jobShow" :default-selector="[0]" :range="jobList" range-key="label"
				@confirm="workType"></u-picker>
			<view class="title">招工人数</view>
			<u-input v-model="num" type="number" placeholder="请输入" placeholder-style="color:#999999;" />
			<view class="title">内容标签</view>
			<view class="content_label">
				<view v-for="(item,index) in all_labels" :key="index" @click="labels_click(item,index)"
					:class="item.ischeck==true?'active_labels':''" class="labels">{{item.label}}</view>
			</view>
			<view class="title">结算方式</view>
			<view class="content_label settlement_method">
				<view class="labels" v-for="(item,index) in settlement_method" :key="index"
					:class="settlement_index==index?'active_settlement':''" @click="settlementclick(item,index)">
					{{item}}
				</view>
			</view>
			<view class="title">工作地址</view>
			<!-- <u-input v-model="address" placeholder="省/市" disabled="true" type="select"  placeholder-style="color:#999999;"
				@click="addressShow=true" /> -->
			<view class="modify_input" @click="addressShow=true">
				<text v-if="address!=''">{{address}}</text>
				<text style="color:#999999" v-else>省/市</text>
				<image src="../../../static/image/drop-down.png"></image>
			</view>
			<u-select v-model="addressShow" mode="mutil-column-auto" :list="cityList" @confirm="confirmCity"></u-select>
			<view class="title">招工要求</view>
			<textarea v-model="requirement" placeholder="请输入" placeholder-style="color:#999999;" maxlength="999" />
		</view>
		<view class="operation">
			<view class="determine" v-if="state" @click="determine">确定</view>
			<view class="determine" v-else @click="determine">保存</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'
	import request from '@/static/js/request.js'

	export default {
		data() {
			return {
				jobShow: false,
				recruitment_type: '',
				recruitment_type_id: '',
				num: '',
				requirement: '',
				address: '',
				addressShow: false,
				all_labels: [{
						label: '包吃',
						ischeck: false,
						id: 4
					},
					{
						label: '包住',
						ischeck: false,
						id: 5
					},
					{
						label: '包吃住',
						ischeck: false,
						id: 3
					},
					{
						label: '日结',
						ischeck: false,
						id: 1
					},
					{
						label: '月结',
						ischeck: false,
						id: 2
					},
					{
						label: '需证书',
						ischeck: false,
						id: 6
					}
				],
				all_labels_list: [],
				settlement_method: ['工时', '工程量', '固定'],
				settlement_index: null,
				settlement_val: '',
				userinfo: {},
				cityList: [],
				jobList: [],
				content_label_ids: '',
				content_label_id_list: [],
				city_id: '',
				area_id: '',
				settlement_val: '',
				province_id: '',
				datas: {},
				id: '',
				state:true
			}
		},
		onLoad(e) {
			this.userinfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.tageMethod()
			this.cityListMethod()
			if (Object.keys(e).length > 0) {
				this.datas = JSON.parse(e.datalist)
				this.id = e.id
				this.state = JSON.parse(e.state)
				// console.log(e);
				// this.getdata()
			}
		},
		onShow() {},
		methods: {
			workType(e) {
				this.recruitment_type = this.jobList[e[0]].label
				this.recruitment_type_id = this.jobList[e[0]].value
			},
			confirmCity(e) {
				console.log(e);
				if (e[0].label == e[1].label) {
					this.address = e[0].label
				} else {
					this.address = e[0].label + ' ' + e[1].label
				}
				this.province_id = e[0].value
				this.city_id = e[1].value
				this.area_id = e[2].value
				// console.log(this.province_id,this.city_id,this.area_id);
			},
			labels_click(item, index) {
				if (this.all_labels[index].ischeck == false) {
					this.all_labels[index].ischeck = true;
				} else {
					this.all_labels[index].ischeck = false;
				}
				this.content_label_id_list = []
				this.all_labels.forEach((item, index) => {
					if (item.ischeck == true) {
						this.content_label_id_list.push(item.id)
					}
				})
				this.content_label_id_list.sort((a, b) => a - b)
				this.content_label_ids = this.content_label_id_list.join(',')
			},
			settlementclick(item, i) {
				this.settlement_index = i
				this.settlement_val = item
			},
			determine() {
				var account_type = this.userinfo.account_type
				var type = ''
				if (account_type == '工人') {
					type = '个人'
				} else if (account_type == '班组长') {
					type = '班组'
				} else {
					type = '企业'
				}
				if (this.recruitment_type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择招工类型'
					})
					return
				}
				if (this.num == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入招工人数'
					})
					return
				}
				if (this.content_label_ids == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择内容标签'
					})
					return
				}
				if (this.settlement_val == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择结算方式'
					})
					return
				}
				if (this.address == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择工作地址'
					})
					return
				}
				if (this.requirement == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入招工要求'
					})
					return
				}
				if (Object.keys(this.datas).length > 0) {
					let data = {
						function_name: '_api_recruit_write',
						model: 'jhj.recruitment.release',
						label_tag_ids: JSON.stringify(this.content_label_id_list),
						access_token: this.userinfo.access_token,
						uid: this.userinfo.uid,
						work_type: this.recruitment_type_id,
						number: this.num,
						settlement_method: this.settlement_val,
						state_id: this.province_id,
						city_id: this.city_id,
						requirement: this.requirement,
						recruit_id: this.id
					}
					request.post('/api/v1/getattr/0', data).then(resp => {
						uni.navigateBack()
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
				} else {
					let data = {
						model: "jhj.recruitment.release",
						function_name: "_api_recruit_create",
						access_token: this.userinfo.access_token,
						uid: this.userinfo.uid,
						location_company_id: this.userinfo.location_company_id,
						recruitment_type: type,
						work_type: this.recruitment_type_id,
						number: this.num,
						city_id: this.city_id,
						state_id: this.province_id,
						area_id: this.area_id,
						settlement_method: this.settlement_val,
						requirement: this.requirement,
						label_ids: this.content_label_ids
					};
					request.post('/api/v1/getattr/0', data).then(resp => {
						uni.navigateBack()
					}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
				}
			},
			cityListMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area', this.userinfo.access_token).then(
					res => {
						this.cityList = res.data
						if (Object.keys(this.datas).length > 0) {
							this.getdata()
						// 	var datas = this.datas
						// 	console.log(this.cityList);
						// 	this.recruitment_type = datas.work_type_name
						// 	if(this.jobList.length>0){
						// 		this.jobList.forEach(item => {
						// 			if (item.label == datas.work_type_name) {
						// 				this.recruitment_type_id = item.value
						// 				console.log(this.recruitment_type_id);
						// 			}
						// 		})
						// 	}
						// 	this.num = datas.number
						// 	this.requirement = datas.requirement
						// 	this.settlement_val = datas.settlement_method
						// 	if (datas.settlement_method == '工时') {
						// 		this.settlement_index = 0
						// 	} else if (datas.settlement_method == '工程量') {
						// 		this.settlement_index = 1
						// 	} else {
						// 		this.settlement_index = 2
						// 	}
						// 	datas.label.forEach(item => {
						// 		this.all_labels.forEach(val => {
						// 			if (item == val.label) {
						// 				val.ischeck = true
						// 				this.content_label_id_list.push(val.id)
						// 			}
						// 		})
						// 	})
						// 	this.content_label_ids = this.content_label_id_list.join(',')
						// 	this.cityList.forEach((item, i) => {
						// 		item.children.forEach((citem) => {
						// 			if (citem.label == datas.city_name) {
						// 				this.city_id = citem.value
						// 				if (citem.label == this.cityList[i].label) {
						// 					this.address = citem.label
						// 				} else {
						// 					this.address = this.cityList[i].label + citem.label
						// 				}
						// 				this.province_id = this.cityList[i].value
						// 			}
						// 		})
						// 	})
						}
					}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				})
			},
			tageMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area_reverse', this.userinfo.access_token)
					.then(
						res => {
							let objData = res.data.tag
							for (let key in objData) {
								let obj = {}
								obj.value = objData[key]
								obj.label = key
								this.jobList.push(obj)
							}
						}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			},
			//升序
			compareNumbers(a, b) { 
			  return a - b;
			},
			getdata(){
				api.recruitmentDetails('jhj.recruitment.release','_api_recruit_detail',this.userinfo.access_token,this.userinfo.uid,this.id).then(res=>{
					this.datas = res.data[0]
					var datas = this.datas
					console.log(this.cityList);
					this.recruitment_type = datas.work_type_name
					if(this.jobList.length>0){
						this.jobList.forEach(item => {
							if (item.label == datas.work_type_name) {
								this.recruitment_type_id = item.value
								console.log(this.recruitment_type_id);
							}
						})
					}
					this.num = datas.number
					this.requirement = datas.requirement
					this.settlement_val = datas.settlement_method
					if (datas.settlement_method == '工时') {
						this.settlement_index = 0
					} else if (datas.settlement_method == '工程量') {
						this.settlement_index = 1
					} else {
						this.settlement_index = 2
					}
					datas.label.forEach(item => {
						this.all_labels.forEach(val => {
							if (item == val.label) {
								val.ischeck = true
								this.content_label_id_list.push(val.id)
							}
						})
					})
					this.content_label_ids = this.content_label_id_list.join(',')
					this.cityList.forEach((item, i) => {
						item.children.forEach((citem) => {
							if (citem.label == datas.city_name) {
								this.city_id = citem.value
								if (citem.label == this.cityList[i].label) {
									this.address = citem.label
								} else {
									this.address = this.cityList[i].label + citem.label
								}
								this.province_id = this.cityList[i].value
							}
						})
					})
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.recruitment {
		.content {
			padding: 8rpx 30rpx 0;
			height: calc(100vh - 154rpx);
			position: relative;
			overflow-y: auto;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 8rpx;
				margin-top: 42rpx;
			}

			.content_label {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.labels {
				width: 206rpx;
				height: 74rpx;
				text-align: center;
				line-height: 74rpx;
				background: #F4F6F8;
				border-radius: 4rpx;
				margin-top: 24rpx;
			}

			.active_labels {
				border: 2rpx solid #E92231;
				color: #E92231;
				background: rgba(233, 34, 49, .1);
			}

			.active_settlement {
				border: 2rpx solid #E92231;
				color: #E92231;
				background: rgba(233, 34, 49, .1);
			}
		}

		.operation {
			width: 100%;
			height: 154rpx;
			padding: 20rpx 40rpx 0;
			border-top: 2rpx solid #E8E9EE;
			position: fixed;
			bottom: 0rpx;
			display: flex;
			justify-content: space-between;
			font-size: 34rpx;
			background: #fff;

			.reset {
				width: 210rpx;
				height: 94rpx;
				background: #F4F6F8;
				border-radius: 4rpx;
				text-align: center;
				line-height: 94rpx;
				color: #333333;
			}

			.determine {
				// width: 440rpx;
				width: 100%;
				height: 94rpx;
				background: linear-gradient(146deg, #FE4D60 5%, #FF7C89 100%);
				border-radius: 4rpx;
				text-align: center;
				line-height: 94rpx;
				color: #FFFFFF;
			}
		}
	}

	/deep/.u-input {
		margin-top: 22rpx;
		height: 74rpx;
	}

	/deep/input {
		// background: #F4F6F8;
		padding-left: 30rpx;
		border: 2rpx solid #E5E5E5;
		background: #fff;
	}

	/deep/textarea {
		width: 100%;
		height: 200rpx !important;
		// background: #F4F6F8;
		padding-left: 30rpx !important;
		padding-right: 30rpx !important;
		padding-top: 18rpx !important;
		margin-bottom: 30rpx;
		margin-top: 22rpx;
		box-sizing: border-box;
		border: 2rpx solid #E5E5E5;
		background: #fff;
	}

	/deep/.u-input__right-icon {
		display: none;
	}

	/deep/.u-select__body__picker-view picker-view-column:nth-child(3) {
		display: none !important;
	}

	.modify_input {
		width: 690rpx;
		height: 74rpx;
		border: 2rpx solid #E5E5E5;
		background: #fff;
		border-radius: 4rpx;
		line-height: 74rpx;
		margin-top: 22rpx;
		color: #333333;
		position: relative;

		text {
			font-size: 28rpx;
			padding-left: 30rpx;
			padding-top: 18rpx;
		}
		image{
			position: absolute;
			width: 26rpx;
			height: 16rpx;
			top: 50%;
			right: 20rpx;
			transform: translate(0,-50%);
		}
	}
</style>
